<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据处理 - ToolsAPI</title>
    <link rel="icon" type="image/x-icon" href="img/ik.ico">
    
    <!-- Bootstrap 5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- 小米风格样式 -->
    <link href="css/xiaomi-style.css" rel="stylesheet">
</head>
<body class="xiaomi-theme">
    <div id="header"></div>
    
    <!-- 主容器 -->
    <div class="xiaomi-admin-container">
        <div id="sidebar"></div>

        <!-- 主内容区域 -->
        <main class="xiaomi-main-content">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-page-header">
                        <h2 class="page-title">
                            <i class="fas fa-cogs me-2"></i>
                            数据处理
                        </h2>
                        <p class="page-subtitle">一站式数据上传、转换和下载服务</p>
                    </div>
                </div>
            </div>

            <!-- 进度指示器 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-card">
                        <div class="card-body">
                            <div class="process-steps">
                                <div class="step active" id="step-upload">
                                    <div class="step-icon">
                                        <i class="fas fa-upload"></i>
                                    </div>
                                    <div class="step-text">文件上传</div>
                                </div>
                                <div class="step-line"></div>
                                <div class="step" id="step-convert">
                                    <div class="step-icon">
                                        <i class="fas fa-sync-alt"></i>
                                    </div>
                                    <div class="step-text">数据转换</div>
                                </div>
                                <div class="step-line"></div>
                                <div class="step" id="step-download">
                                    <div class="step-icon">
                                        <i class="fas fa-download"></i>
                                    </div>
                                    <div class="step-text">结果下载</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第一步：文件上传 -->
            <div class="row mb-4" id="upload-section">
                <div class="col-lg-6 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-upload me-2"></i>
                                文件上传
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- 转换类型选择 -->
                            <div class="mb-3">
                                <label class="form-label">转换类型</label>
                                <select id="conversionType" class="form-select">
                                    <option value="">请选择转换类型</option>
                                    <option value="yinhai-to-ph1">银海品项 → PH1</option>
                                    <option value="clinic-log">门诊日志转换</option>
                                    <option value="ph3-remote">PH3异地数据转换</option>
                                    <option value="data-split">数据拆分</option>
                                </select>
                            </div>

                            <!-- 文件上传区域 -->
                            <div class="mb-3">
                                <label class="form-label">数据文件</label>
                                <div class="upload-area p-3">
                                    <div class="text-center mb-3">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                        <p class="mb-2">选择要上传的Excel文件</p>
                                        <p class="text-muted small">支持 Excel (.xlsx) 文件，最大100MB</p>
                                    </div>
                                    <input type="file" id="fileInput" class="form-control" accept=".xlsx">
                                </div>
                            </div>

                            <!-- 文件信息显示 -->
                            <div id="file-info" class="d-none">
                                <div class="alert alert-info">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-file-excel me-2"></i>
                                        <div class="flex-grow-1">
                                            <div class="fw-bold" id="file-name"></div>
                                            <div class="small text-muted" id="file-size"></div>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="window.clearFile()">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 上传进度 -->
                            <div id="upload-progress" class="d-none">
                                <div class="progress mb-2">
                                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                </div>
                                <div class="text-center small text-muted">正在上传...</div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="d-grid">
                                <button id="uploadBtn" class="btn btn-outline-primary">
                                    <i class="fas fa-upload me-2"></i>
                                    开始上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-info-circle me-2"></i>
                                上传说明
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="upload-tips">
                                <h6><i class="fas fa-file-excel me-2"></i>支持的文件格式：</h6>
                                <ul class="mb-3">
                                    <li>Excel文件 (.xlsx)</li>
                                </ul>

                                <h6><i class="fas fa-exclamation-triangle me-2"></i>注意事项：</h6>
                                <ul class="mb-3">
                                    <li>文件大小不超过100MB</li>
                                    <li>请确保数据格式符合模板要求</li>
                                    <li>第一行应为列标题</li>
                                    <li>避免空行和特殊字符</li>
                                </ul>

                                <h6><i class="fas fa-lightbulb me-2"></i>温馨提示：</h6>
                                <ul>
                                    <li>建议先下载对应的模板文件</li>
                                    <li>可在模板管理页面获取标准模板</li>
                                    <li>确认数据格式后再进行上传</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二步：数据转换 -->
            <div class="row mb-4 d-none" id="conversion-section">
                <div class="col-lg-4 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-play me-2"></i>
                                转换控制
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="alert alert-success">
                                    <div class="small">
                                        <strong>文件：</strong><span id="uploaded-file-name">未选择</span><br>
                                        <strong>类型：</strong><span id="selected-conversion-type">未选择</span>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3 d-none">
                                <div class="d-grid">
                                    <button id="startConversion" class="btn btn-primary">
                                        <i class="fas fa-play me-2"></i>
                                        开始转换
                                    </button>
                                </div>
                            </div>

                            <div id="conversion-progress" class="d-none">
                                <div class="progress mb-2">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                                </div>
                                <div class="text-center small text-muted">正在转换数据...</div>
                            </div>

                            <div id="conversion-status" class="alert alert-light">
                                <div class="text-center text-muted">
                                    <i class="fas fa-info-circle me-2"></i>
                                    文件上传完成后将自动开始转换
                                </div>
                            </div>

                            <div class="d-grid">
                                <button type="button" class="btn btn-outline-secondary" onclick="window.backToUpload()">
                                    <i class="fas fa-arrow-left me-2"></i>
                                    返回上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-list me-2"></i>
                                转换日志
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="conversion-logs" style="height: 400px; overflow-y: auto;">
                                <div class="text-center text-muted py-5">
                                    <i class="fas fa-file-alt fa-3x mb-3"></i>
                                    <h5>转换日志</h5>
                                    <p>转换过程中的详细信息将在这里显示</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三步：结果下载 -->
            <div class="row mb-4 d-none" id="download-section">
                <div class="col-lg-6 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-file-download me-2"></i>
                                下载文件
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="download-files">
                                <div class="text-center text-muted py-4">
                                    <i class="fas fa-file-alt fa-3x mb-3"></i>
                                    <h5>暂无可下载文件</h5>
                                    <p>请先完成数据转换</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-chart-bar me-2"></i>
                                转换统计
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="conversion-stats">
                                <div class="row text-center">
                                    <div class="col-6 mb-3">
                                        <div class="stat-item">
                                            <div class="stat-number text-success">0</div>
                                            <div class="stat-label">成功转换</div>
                                        </div>
                                    </div>
                                    <div class="col-6 mb-3">
                                        <div class="stat-item">
                                            <div class="stat-number text-danger">0</div>
                                            <div class="stat-label">转换失败</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="stat-item">
                                            <div class="stat-number text-info">0</div>
                                            <div class="stat-label">总记录数</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="stat-item">
                                            <div class="stat-number text-warning">0%</div>
                                            <div class="stat-label">成功率</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-2 mt-3">
                                <button type="button" class="btn btn-outline-warning" onclick="window.restartProcess()">
                                    <i class="fas fa-redo me-2"></i>
                                    重新开始
                                </button>
                                <button type="button" class="btn btn-primary" onclick="window.location.href='history.html'">
                                    <i class="fas fa-history me-2"></i>
                                    查看历史
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 数据拆分设置模态框 -->
    <div class="modal fade" id="dataSplitModal" tabindex="-1" aria-labelledby="dataSplitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataSplitModalLabel">
                        <i class="fas fa-cut me-2"></i>
                        数据拆分设置
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        设置每个表的数据拆分条数，系统将根据此数值将大文件拆分成多个小文件。
                    </div>
                    <div class="mb-3">
                        <label for="splitCount" class="form-label">每个表拆分条数</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-list-ol"></i>
                            </span>
                            <input type="number" class="form-control" id="splitCount" value="500" min="1" max="10000">
                            <span class="input-group-text">条</span>
                        </div>
                        <div class="form-text">
                            建议值：100-1000条，默认500条。条数越小拆分文件越多。
                        </div>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>注意：</strong>拆分条数建议根据数据量大小设置，过小会产生过多文件，过大可能影响处理效率。
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" id="confirmSplitBtn">
                        <i class="fas fa-check me-2"></i>
                        确定并开始上传
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    <script src="js/layout-loader.js"></script>
    <script src="js/data-processing.js"></script>
</body>
</html>